<template>
  <component :is="tag" :class="textClass" :style="textStyle">
    <slot />
  </component>
</template>

<script>

export default {
  name: 'AxiomText',
  props: {
    // HTML 标签
    tag: {
      type: String,
      default: 'span',
    },
    // 文本大小
    size: {
      type: String,
      default: 'medium',
      validator: (value) =>
        ['default', 'small', 'medium', 'large', 'extra-large'].includes(value),
    },
    // 文本粗细
    weight: {
      type: String,
      default: 'normal',
      validator: (value) =>
        ['light', 'normal', 'medium', 'bold', 'extra-bold'].includes(value),
    },
    // 文本颜色类型
    type: {
      type: String,
      default: 'default',
      validator: (value) =>
        [
          'default',
          'primary',
          'secondary',
          'success',
          'warning',
          'danger',
          'info',
          'muted',
        ].includes(value),
    },
    // 文本对齐
    align: {
      type: String,
      default: 'left',
      validator: (value) => ['left', 'center', 'right', 'justify'].includes(value),
    },
    // 是否为斜体
    italic: {
      type: Boolean,
      default: false,
    },
    // 是否有下划线
    underline: {
      type: Boolean,
      default: false,
    },
    // 是否有删除线
    strikethrough: {
      type: Boolean,
      default: false,
    },
    // 继承颜色
    inheritColor: {
      type: Boolean,
      default: false,
    },
    clickable: {
      type: Boolean,
      default: false,
    },
    truncate: {
      type: [Boolean, Number, String],
      default: false,
    },
    // 是否为块级元素
    block: {
      type: Boolean,
      default: false,
    },
    // 是否应用渐变色
    gradient: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    textClass() {
      const classes = [
        'axiom-text',
        `axiom-text--size-${this.size}`,
        `axiom-text--weight-${this.weight}`,
        `axiom-text--align-${this.align}`,
        `axiom-text--color-${this.type}`,
        {
          'axiom-text--block': this.block,
          'axiom-text--italic': this.italic,
          'axiom-text--underline': this.underline,
          'axiom-text--line-through': this.strikethrough,
          'axiom-text--gradient': this.gradient,
          'axiom-text--clickable': this.clickable,
          'axiom-text--truncate': this.truncate === true,
        },
      ];
      if (typeof this.truncate === 'number' || (typeof this.truncate === 'string' && !isNaN(parseInt(this.truncate)))) {
        classes.push('axiom-text--truncate-multiline');
      }
      return classes;
    },
    textStyle() {
      const style = {};
      if (typeof this.truncate === 'number' || (typeof this.truncate === 'string' && !isNaN(parseInt(this.truncate)))) {
        style['-webkit-line-clamp'] = parseInt(this.truncate);
      }
      return style;
    }
  },
  created() {
    // this.logger.debug('CText组件初始化', {
    //   tag: this.tag,
    //   size: this.size,
    //   weight: this.weight,
    // })
  },
}
</script>

<style lang="scss">
@use '../../styles/components/common/axiom-text';
</style> 